<template>
  <ul class="comment-list">
    <li v-for="item of comList" :key="item.id">
      <van-skeleton title avatar row="3" :loading="loading">
        <img :src="item.img" class="msg-avatar"/>
        <div class="msg-box">
          <h3>{{ item.nickname }}</h3>
          <p class="comment-text">{{ item.commentText }}</p>
          <p class="comment-reply-p">
            <span class="msg-time">{{ item.time }}</span>
            <span class="reply" @click="getFocus">回复</span>
          </p>
          <!-- 二级评论 -->
          <ol class="minor-comment-box" v-show="item.mincomList.length >= 0">
            <li v-for="itm of item.mincomList" :key="itm.id">
              <img :src="itm.img" class="min-msg-avatar"/>
              <div class="min-msg-box">
                <h3>{{ itm.nickname }}</h3>
                <p class="min-comment-text">回复 <span style="color: rgba(25,25,112,.9)">{{ itm.hfr }}</span>: {{ item.commentText }}</p>
                <p class="min-comment-reply-p">
                  <span class="min-msg-time">{{ item.time }}</span>
                  <span class="min-reply" @click="getFocus" >回复</span>
                </p>
              </div>
            </li>
          </ol>
        </div>
      </van-skeleton>
    </li>
  </ul>
</template>

<script>
import Vue from 'vue'
import { Skeleton } from 'vant'

Vue.use(Skeleton)

export default {
  props: {
    getFocus: {
      type: Function,
      default: () => {
        return null
      }
    },
    loading: {
      type: Boolean,
      default: true
    },
    comList: {
      type: Array,
      default: () => [{
        id: 1, img: require('@/assets/img/109951164627305702.jpg'), nickname: '晋祠阿芙蓉1', commentText: '我的美好第一天，小懒猪记账~一二三四五六七八九十十一', time: '04-21 21:32', mincomList: [{ id: '01', img: require('@/assets/img/109951164286019220.jpg'), nickname: '猪猪', hfr: '朱朱', commentText: '你中午准备吃啥？', time: '03-22 21:32' }, { id: '02', img: require('@/assets/img/109951164286019220.jpg'), nickname: '猪猪', hfr: '朱朱', commentText: '你中午准备吃啥？', time: '03-22 21:32' }, { id: '03', img: require('@/assets/img/109951164286019220.jpg'), nickname: '猪猪', hfr: '朱朱', commentText: '你中午准备吃啥？', time: '03-22 21:32' }]
      }, {
        id: 2, img: require('@/assets/img/109951164627305702.jpg'), nickname: '晋祠阿芙蓉2', commentText: '我的美好第二天，小懒猪记账~一二三四五六七八九十十一', time: '04-22 21:33', mincomList: []
      }, {
        id: 3, img: require('@/assets/img/109951164627305702.jpg'), nickname: '晋祠阿芙蓉3', commentText: '我的美好第三天，小懒猪记账~一二三四五六七八九十十一', time: '04-23 21:34', mincomList: []
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/community/comment.scss';
</style>
